<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>好看的图片展示效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1030px;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .list {
            border-radius: 15px;
            overflow: hidden;
            width: 300px;
            height: 200px;
            position: relative;
            margin-bottom: 20px;
        }

        .list div {
            position: absolute;
            top: 0;
            left: 0;
            transform: rotate(-100deg);
            /*旋转中心点*/
            transform-origin: top left;

            transition: all 0.8s;
        }

        .current div {
            transform: rotate(0deg);
        }

        .list div.top {
            transform-origin: top left;
        }

        .list div.right {
            transform-origin: top right;
        }

        .list div.bottom {
            transform-origin: bottom right;
        }

        .list div.left {
            transform-origin: left bottom;
        }
    </style>
    <script src="../../libs/jquery3_1_1.min.js"></script>
</head>
<body>
<div class="box">
    <div class="list">
        <img src="images/00.jpg" alt="">
        <div>
            <img src="images/1.jpg" alt="">
        </div>
    </div>


    <div class="list">
        <img src="images/00.jpg" alt="">
        <div>
            <img src="images/2.jpg" alt="">
        </div>
    </div>

    <div class="list">
        <img src="images/00.jpg" alt="">
        <div>
            <img src="images/3.jpg" alt="">
        </div>
    </div>


    <div class="list">
        <img src="images/00.jpg" alt="">
        <div>
            <img src="images/4.jpg" alt="">
        </div>
    </div>


    <div class="list">
        <img src="images/00.jpg" alt="">
        <div>
            <img src="images/5.jpg" alt="">
        </div>
    </div>


    <div class="list">
        <img src="images/00.jpg" alt="">
        <div>
            <img src="images/6.jpg" alt="">
        </div>
    </div>


    <div class="list">
        <img src="images/00.jpg" alt="">
        <div>
            <img src="images/7.jpg" alt="">
        </div>
    </div>


    <div class="list">
        <img src="images/00.jpg" alt="">
        <div>
            <img src="images/8.jpg" alt="">
        </div>
    </div>


    <div class="list">
        <img src="images/00.jpg" alt="">
        <div>
            <img src="images/9.jpg" alt="">
        </div>
    </div>
</div>
</body>
</html>

<script>
    $(function () {
        $(".list").on("mouseenter mouseleave", function (e) {
            var that = $(this);  // 先把当前元素存起来
            var w = $(this).width(); // 得到盒子宽度
            var h = $(this).height();// 得到盒子高度
            var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
            // 获取x值
            var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
            // 获取y值
            var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
            // 将点的坐标对应的弧度值换算成角度度数值   0 1 2 3
            if (e.type == 'mouseenter') {
                switch (direction) {
                    case 0:  // 鼠标从上面进来
                        comeOn("top");
                        break;
                    case 1:  // 鼠标从上面进来
                        comeOn("right");
                        break;
                    case 2:  // 鼠标从上面进来
                        comeOn("bottom");
                        break;
                    case 3:  // 鼠标从上面进来
                        comeOn("left");
                        break;
                }
            } else {

                switch (direction) {
                    case 0:  // 鼠标从上面进来
                        getOut("top");
                        break;
                    case 1:  // 鼠标从上面进来
                        getOut("right");
                        break;
                    case 2:  // 鼠标从上面进来
                        getOut("bottom");
                        break;
                    case 3:  // 鼠标从上面进来
                        getOut("left");
                        break;
                }
            }
            function comeOn(str) {
                that.addClass("current");
                that.children("div").removeClass().addClass(str);
                // 先清除前的类， 留下现在的
            }

            function getOut(str) {
                that.removeClass("current");
                that.children("div").removeClass().addClass(str);
            }
        });
    })
</script>